﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Photo.aspx.cs" Inherits="WebApplication1.WebForm1" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <link href="css/weui.css" rel="stylesheet" />
    <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js"></script>
    <script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js" type="text/javascript"></script>
    <script>
        var images = {
            localId: [],
            serverId: []
        };

        wx.config({
            debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
            appId: '<%=Appid %>', // 必填，公众号的唯一标识
            timestamp: '<%=timestamp %>', // 必填，生成签名的时间戳
            nonceStr: '<%=nonceStr %>', // 必填，生成签名的随机串
            signature: '<%=signature %>', // 必填，签名，见附录1
            jsApiList: ['chooseImage', 'previewImage', 'uploadImage', 'downloadImage', 'openLocation'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
        });

        //wx.ready(function () {
        //    wx.checkJsApi({
        //        jsApiList: ['chooseImage'], // 需要检测的JS接口列表，所有JS接口列表见附录2,
        //        success: function (res) {
        //            // 以键值对的形式返回，可用的api值true，不可用为false
        //            // 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
        //            alert(res.errMsg);
        //        }
        //    });
        //});


        //wx.error(function (res) {
        //    alert(res);
        //});

        //拍照或从手机相册中选图接口  
        function wxChooseImage() {
            wx.chooseImage({
                count: 1,
                needResult: 1,
                sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有  
                sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有  
                success: function (data) {
                    localIds = data.localIds[0].toString(); // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片  
                    if (rh.tostr(localIds)) {
                        wxuploadImage(localIds);
                    }
                },
                fail: function (res) {
                    alterShowMessage("操作提示", JSON.stringify(res), "1", "确定", "", "", "");
                }

            });
        }

        //上传图片接口  
        function wxuploadImage(e) {

            wx.uploadImage({
                localId: e, // 需要上传的图片的本地ID，由chooseImage接口获得  
                isShowProgressTips: 1, // 默认为1，显示进度提示  
                success: function (res) {
                    mediaId = res.serverId; // 返回图片的服务器端ID  
                    if (rh.tostr(mediaId)) {
                        $(".myimg").attr("src", localIds);
                    }

                },
                fail: function (error) {
                    picPath = '';
                    localIds = '';
                    alert(Json.stringify(error));

                }

            });
        }

        //浏览图片

        function chooseImages() {
            wx.chooseImage({

                success: function (res) {

                    //alert('已选择 ' + res.localIds.length + ' 张图片');             

                    images.localId = res.localIds;
                    $("#img1").attr("src", res.localIds.toString());
                }

            });

        }

        function ShowWZ() {
            wx.getLocation({
                type: 'wgs84', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
                success: function (res) {
                    var latitude = res.latitude; // 纬度，浮点数，范围为90 ~ -90
                    var longitude = res.longitude; // 经度，浮点数，范围为180 ~ -180。
                    var speed = res.speed; // 速度，以米/每秒计
                    var accuracy = res.accuracy; // 位置精度

                    wx.openLocation({
                        latitude: latitude, // 纬度，浮点数，范围为90 ~ -90
                        longitude: longitude, // 经度，浮点数，范围为180 ~ -180。
                        name: '我的位置', // 位置名
                        address: '我的位置说明', // 地址详情说明
                        scale: 28, // 地图缩放级别,整形值,范围从1~28。默认为最大
                        infoUrl: 'www.baidu.com' // 在查看位置界面底部显示的超链接,可点击跳转
                    });
                }
            });


        }
    </script>
</head>
<body>
    <form id="form1" runat="server">

        <div class="main">
            <div class="content">
                <input type="button" style="width: 250px; height: 80px" id="btn" value="提取相册" onclick="chooseImages()" />
            </div>
            <div class="content">
                <input type="button" style="width: 250px; height: 80px" id="btn1" value="打开位置" onclick="ShowWZ()" />
            </div>
        </div>

        <div>
            <img id="img1" class="myimg"></img>
        </div>
    </form>
</body>
</html>
